const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 内部有一个工作流叫做tapable
module.exports = {
  mode: 'development',
  // 没有名字，默认打包后的chunk的name就是main

  // 如果是数组，出口还是一个文件
  // 如果是对象，出口就是多个文件,出口不可以写死名字
  entry: {
    main: './src/index.js',
    base: './src/base.js'
  },
  output: {
    path: path.join(__dirname, 'output'),
    // 根据生成内容生成的hash
    filename: '[name].[hash].js',
    // 默认是 ""
    publicPath: ""
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // 多个loader是从后往前写
        loader: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg|svg|gif|bmp)$/,
        // 可以处理任意二进制数据
        loader: 'file-loader'
      }
    ]
  },
  plugins: [
    // 默认会清理output的path
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./template.html",
      filename: "index.html",
      title: 'Hello World app',
      hash: true,
      // 要引入那些 chunk
      chunks: ['main'],
      minify: { // 压缩HTML文件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true// 压缩内联css
      },
    })
  ],
  // 把打包的文件放到内存了
  devServer: {
    contentBase: './output',
    host: 'localhost',
    port: 4000,
    // 开启gzip
    compress: true,
    open: true
  }
}